<template>
  <div class="legal-promotion-container">
    <!-- 第一列：法制宣防数据总览 -->
    <div class="left-column">
      <div class="data-overview">
        <div class="card-header">
          <i class="el-icon-data-analysis"></i>
          <span>法制宣防数据总览</span>
        </div>
        <div class="overview-stats">
          <div class="stat-item">
            <div class="stat-title">实时普法宣传</div>
            <div class="stat-chart" ref="promotionChart"></div>
          </div>
          <div class="stat-item">
            <div class="stat-title">法律咨询量</div>
            <div class="stat-chart" ref="consultationChart"></div>
          </div>
        </div>
      </div>
      
      <div class="ranking-list">
        <div class="card-header">
          <i class="el-icon-trophy"></i>
          <span>普法活跃度排行</span>
        </div>
        <div class="ranking-content">
          <div class="ranking-item" v-for="(item, index) in rankingData" :key="index">
            <span class="rank-number">{{ index + 1 }}</span>
            <span class="rank-name">{{ item.name }}</span>
            <span class="rank-score">{{ item.score }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二列：智能法制交互中心 -->
    <div class="center-column">
      <div class="ai-consultation">
        <div class="card-header">
          <i class="el-icon-chat-dot-round"></i>
          <span>DeepSeek法制问答</span>
        </div>
        <div class="chat-container">
          <div class="chat-messages" ref="chatMessages">
            <div v-for="(msg, index) in chatHistory" :key="index" :class="['message', msg.type]">
              {{ msg.content }}
            </div>
            <div v-if="isLoading" class="message system loading">
              <div class="loading-spinner"></div>
            </div>
          </div>
          <div class="chat-input">
            <input type="text" v-model="userInput" placeholder="请输入您的问题...">
            <button @click="sendMessage">发送</button>
          </div>
        </div>
      </div>
      
      <div class="case-showcase">
        <div class="card-header">
          <i class="el-icon-document"></i>
          <span>典型案例展示</span>
        </div>
        <div class="case-slider" ref="caseSlider">
          <div class="case-item" v-for="(caseItem, index) in cases" :key="index">
            <div class="case-title">{{ caseItem.title }}</div>
            <div class="case-content">{{ caseItem.content }}</div>
            <div class="case-tag">{{ caseItem.tag }}</div>
          </div>
        </div>
      </div>
      
      <!-- <div class="effect-charts">
        <div class="card-header">
          <i class="el-icon-trend-charts"></i>
          <span>宣防成效分析</span>
        </div>
        <div class="charts-container">
          <div class="chart-item" ref="crimeChart"></div>
          <div class="chart-item" ref="awarenessChart"></div>
        </div>
      </div> -->
    </div>

    <!-- 第三列：宣防工作实时动态 -->
    <div class="right-column">
      <div class="live-wall">
        <div class="card-header">
          <i class="el-icon-video-camera"></i>
          <span>普法活动直播</span>
        </div>
        <div class="live-grid">
          <div class="live-item" v-for="(live, index) in liveStreams" :key="index">
            <div class="live-preview">
              <img :src="live.thumbnail" alt="直播预览">
              <div class="live-status">{{ live.status }}</div>
            </div>
            <div class="live-info">
              <div class="live-title">{{ live.title }}</div>
              <div class="live-time">{{ live.time }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="task-tracking">
        <div class="card-header">
          <i class="el-icon-timer"></i>
          <span>宣防任务追踪</span>
        </div>
        <div class="task-list">
          <div class="task-item" v-for="(task, index) in tasks" :key="index">
            <div class="task-header">
              <span class="task-title">{{ task.title }}</span>
              <span class="task-status" :class="task.status">{{ task.statusText }}</span>
            </div>
            <div class="task-progress">
              <div class="progress-bar">
                <div class="progress" :style="{ width: task.progress + '%' }"></div>
              </div>
              <span class="progress-text">{{ task.progress }}%</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="team-log">
        <div class="card-header">
          <i class="el-icon-notebook-2"></i>
          <span>警民联合工作日志</span>
        </div>
        <div class="log-timeline">
          <div class="log-item" v-for="(log, index) in teamLogs" :key="index">
            <div class="log-time">{{ log.time }}</div>
            <div class="log-content">{{ log.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'

export default {
  name: 'LegalPromotion',
  data() {
    return {
      // 排行榜数据
      rankingData: [
        { name: '金泉花园', score: 98 },
        { name: '悦和家园', score: 95 },
        { name: '怡景花园', score: 92 },
        { name: '瀚海明珠小区', score: 90 },
        { name: '丽景阳光小区', score: 88 },
        { name: '润和园', score: 85 },
        { name: '金水湾小区', score: 82 }
      ],
      // 聊天历史
      chatHistory: [
        { type: 'system', content: '欢迎使用DeepSeek法制问答系统，请问有什么可以帮您？' }
      ],
      userInput: '',
      // 案例数据
      cases: [
        {
          title: '邻里纠纷调解案例',
          content: '通过法律途径成功调解一起因装修噪音引发的邻里纠纷',
          tag: '金泉路e站特色案例'
        },
        {
          title: '物业费纠纷处理',
          content: '运用法律知识帮助居民解决物业费缴纳争议',
          tag: '典型案例'
        }
      ],
      // 直播数据
      liveStreams: [
        {
          title: '民法典解读讲座',
          time: '14:00-16:00',
          status: '直播中',
          thumbnail: '/images/live1.jpg'
        },
        {
          title: '防诈骗知识宣传',
          time: '10:00-11:30',
          status: '即将开始',
          thumbnail: '/images/live2.jpg'
        }
      ],
      // 任务数据
      tasks: [
        {
          title: '社区法律知识竞赛',
          status: 'processing',
          statusText: '进行中',
          progress: 60
        },
        {
          title: '老年人防诈骗宣传',
          status: 'pending',
          statusText: '待开始',
          progress: 0
        }
      ],
      // 工作日志
      teamLogs: [
        {
          time: '09:00',
          content: '开展社区法律咨询活动，解答居民关于物业纠纷问题'
        },
        {
          time: '10:30',
          content: '组织社区老年人防诈骗知识讲座，参与人数达50人'
        },
        {
          time: '14:30',
          content: '与社区志愿者一起开展入户普法宣传，覆盖100户居民'
        },
        {
          time: '15:45',
          content: '处理一起邻里纠纷调解，成功化解矛盾'
        },
        {
          time: '16:30',
          content: '开展青少年法律知识竞赛，参与学生30人'
        },
        {
          time: '17:00',
          content: '组织社区法律知识问答活动，发放普法宣传资料200份'
        },
        {
          time: '18:30',
          content: '与社区民警联合开展夜间巡逻，宣传安全防范知识'
        },
        {
          time: '19:00',
          content: '召开社区法律顾问座谈会，收集居民法律需求'
        }
      ],
      // 普法宣传数据
      promotionData: {
        today: 12,
        month: 156,
        trend: [45, 52, 68, 75, 82, 95, 112, 128, 145, 156],
        types: [
          { name: '法律讲座', value: 45 },
          { name: '社区宣传', value: 38 },
          { name: '线上直播', value: 32 },
          { name: '入户宣传', value: 25 },
          { name: '其他活动', value: 16 }
        ]
      },
      // 法律咨询数据
      consultationData: {
        online: 328,
        offline: 156,
        total: 484,
        trend: [35, 42, 58, 65, 72, 85, 102, 118, 135, 156],
        hotTopics: [
          { name: '物业纠纷', value: 85 },
          { name: '邻里矛盾', value: 72 },
          { name: '婚姻家庭', value: 65 },
          { name: '劳动权益', value: 58 },
          { name: '消费维权', value: 45 }
        ]
      },
      // 重点人群数据
      keyPopulationData: {
        total: 1250,
        covered: 1062,
        coverage: 85,
        groups: [
          { name: '老年人', value: 320, covered: 280 },
          { name: '青少年', value: 280, covered: 245 },
          { name: '外来务工', value: 450, covered: 382 },
          { name: '特殊群体', value: 200, covered: 155 }
        ]
      },
      isLoading: false
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // 初始化普法宣传图表
      const promotionChart = echarts.init(this.$refs.promotionChart)
      promotionChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['法律讲座', '社区宣传', '线上直播', '入户宣传', '其他活动'],
          axisLabel: {
            color: '#7eb9ff',
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#7eb9ff'
          }
        },
        series: [{
          data: [45, 38, 32, 25, 16],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00c6ff' },
              { offset: 1, color: '#0072ff' }
            ]),
            borderRadius: [4, 4, 0, 0]
          }
        }]
      })

      // 初始化咨询量图表
      const consultationChart = echarts.init(this.$refs.consultationChart)
      consultationChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLabel: {
            color: '#7eb9ff'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#7eb9ff'
          }
        },
        series: [{
          data: [35, 42, 58, 65, 72, 85],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#00c6ff',
            width: 3
          },
          itemStyle: {
            color: '#00c6ff'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 198, 255, 0.3)' },
              { offset: 1, color: 'rgba(0, 198, 255, 0.1)' }
            ])
          }
        }]
      })

      // 初始化犯罪率图表
      const crimeChart = echarts.init(this.$refs.crimeChart)
      crimeChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLabel: {
            color: '#7eb9ff'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#7eb9ff',
            formatter: '{value}%'
          }
        },
        series: [{
          data: [12, 10, 8, 7, 6, 5],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#00c6ff',
            width: 3
          },
          itemStyle: {
            color: '#00c6ff'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 198, 255, 0.3)' },
              { offset: 1, color: 'rgba(0, 198, 255, 0.1)' }
            ])
          }
        }]
      })

      // 初始化意识测评图表
      const awarenessChart = echarts.init(this.$refs.awarenessChart)
      awarenessChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        radar: {
          indicator: [
            { name: '法律知识', max: 100 },
            { name: '维权意识', max: 100 },
            { name: '守法意识', max: 100 },
            { name: '参与度', max: 100 },
            { name: '满意度', max: 100 }
          ],
          splitArea: {
            areaStyle: {
              color: ['rgba(0, 198, 255, 0.1)']
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            }
          }
        },
        series: [{
          type: 'radar',
          data: [{
            value: [85, 90, 88, 82, 95],
            name: '当前得分',
            areaStyle: {
              color: 'rgba(0, 198, 255, 0.3)'
            },
            lineStyle: {
              color: '#00c6ff',
              width: 2
            },
            itemStyle: {
              color: '#00c6ff'
            }
          }]
        }]
      })
    },
    sendMessage() {
      if (this.userInput.trim()) {
        this.chatHistory.push({
          type: 'user',
          content: this.userInput
        })
        this.isLoading = true
        // 调用DeepSeek API获取回复
        this.getAIResponse(this.userInput)
        this.userInput = ''
      }
    },
    getAIResponse(question) {
      // 调用 DeepSeek API
      fetch('https://api.deepseek.com/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer sk-c87095b6108d4cb7936123c998bee803'
        },
        body: JSON.stringify({
          model: 'deepseek-chat',
          messages: [
            {
              role: 'system',
              content: '你是一个专业的法律顾问，请用简洁明了的语言回答用户的法律问题。'
            },
            {
              role: 'user',
              content: question
            }
          ],
          temperature: 0.7,
          max_tokens: 1000,
          stream: false
        })
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('API 调用失败')
        }
        return response.json()
      })
      .then(data => {
        if (data.choices && data.choices[0]) {
          this.chatHistory.push({
            type: 'system',
            content: data.choices[0].message.content
          })
        } else {
          this.chatHistory.push({
            type: 'system',
            content: '抱歉，暂时无法获取回答，请稍后再试。'
          })
        }
      })
      .catch(error => {
        console.error('API调用错误:', error)
        this.chatHistory.push({
          type: 'system',
          content: '系统繁忙，请稍后再试。'
        })
      })
      .finally(() => {
        this.isLoading = false
      })
    }
  }
}
</script>

<style scoped>
.legal-promotion-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 40px);
  width: 100%;
  padding: 20px;
  color: #fff;
  background: #001324;
  box-sizing: border-box;
  overflow: hidden;
}

.left-column, .center-column, .right-column {
  width: calc(100% / 3);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  padding-bottom: 20px;
  height: calc(100vh - 60px);
}

.data-overview {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.overview-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  padding: 15px;
  background: transparent;
  border-radius: 8px;
}

.stat-item {
  background: transparent;
  padding: 20px;
  border-radius: 8px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: calc(50% - 10px);
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.stat-title {
  color: #7eb9ff;
  margin-bottom: 15px;
  font-size: 16px;
  position: relative;
  padding-left: 10px;
}

.stat-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #00c6ff;
}

.stat-chart {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: calc(100% - 40px);
  position: relative;
  margin-top: 20px;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 198, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #00c6ff;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  color: #00c6ff;
  font-size: 14px;
  min-width: 40px;
  text-align: right;
}

.ranking-list {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ranking-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.ranking-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.rank-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00c6ff;
  border-radius: 12px;
  font-size: 14px;
}

.rank-name {
  flex: 1;
  color: #7eb9ff;
}

.rank-score {
  color: #00c6ff;
  font-weight: 600;
}

.ai-consultation {
  background: rgba(0, 24, 48, 0.5);
  border: 1px solid rgba(0, 198, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  height: calc(100% - 80px);
}

.message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  max-width: 80%;
}

.message.system {
  background: rgba(0, 198, 255, 0.1);
  margin-right: auto;
}

.message.user {
  background: rgba(0, 198, 255, 0.2);
  margin-left: auto;
}

.chat-input {
  display: flex;
  gap: 10px;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  background: rgba(0, 24, 48, 0.3);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  color: #fff;
}

.chat-input button {
  padding: 10px 20px;
  background: #00c6ff;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.case-slider {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.case-item {
  padding: 20px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.case-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.case-title {
  color: #00c6ff;
  font-size: 16px;
  margin-bottom: 10px;
}

.case-content {
  color: #7eb9ff;
  font-size: 14px;
  margin-bottom: 10px;
}

.case-tag {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(0, 198, 255, 0.1);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  color: #00c6ff;
  font-size: 12px;
}

.charts-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  min-height: 0;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.chart-item {
  flex: 1;
  min-height: 0;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  width: 100%;
  border: 1px solid rgba(0, 198, 255, 0.1);
  padding: 15px;
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.live-item {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.live-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.live-preview {
  position: relative;
  height: 120px;
}

.live-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  background: rgba(255, 0, 0, 0.8);
  border-radius: 4px;
  font-size: 12px;
}

.live-info {
  padding: 10px;
}

.live-title {
  color: #00c6ff;
  margin-bottom: 5px;
}

.live-time {
  color: #7eb9ff;
  font-size: 12px;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.task-item {
  background: rgba(0, 24, 48, 0.3);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.task-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.task-title {
  color: #7eb9ff;
}

.task-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.task-status.processing {
  background: rgba(0, 198, 255, 0.1);
  color: #00c6ff;
  border: 1px solid rgba(0, 198, 255, 0.3);
}

.task-status.pending {
  background: rgba(255, 173, 0, 0.1);
  color: #ffad00;
  border: 1px solid rgba(255, 173, 0, 0.3);
}

.log-timeline {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
}

.log-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 24, 48, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 198, 255, 0.1);
  transition: all 0.3s;
}

.log-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.1);
}

.log-time {
  color: #00c6ff;
  font-size: 14px;
  width: 60px;
}

.log-content {
  color: #7eb9ff;
  flex: 1;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 24, 48, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 198, 255, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 198, 255, 0.5);
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 198, 255, 0.3);
  border-radius: 50%;
  border-top-color: #00c6ff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.message.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background: rgba(0, 198, 255, 0.1);
}
</style> 